<template>
	<view class="membertransfer">
		<image src="../../static/images/ruhuitubian.png" class="img"></image>
		<view class="btn-img">
			<view class="left borderradius" @click="goapplyfororganizer">
				<image src="../../static/images/shenqingzuzhiyuan.png" class="image"></image>
				<view class="text" style="font-weight: 700;">
					扫码申请组织员
				</view>
			</view>
			<view class="flex1">
				<view class="flex right1 background-f borderradius" @click="gofillintransfer">
					<image src="../../static/images/tianbaoruhui.png" class="image"></image>
					<text style="font-weight: 700;">填报转会</text>
				</view>
				<view class="flex right2 background-f borderradius" @click="goscancodetransfer">
					<text class="flex1 marginL20" style="font-weight: 700;">扫码转会</text>
					<image src="../../static/images/saomaruhui.png" class="image"></image>
				</view>
			</view>
		</view>

		<view class="margin-b">
			<view class="tianbao tianbao-backimg">
				<text class="flex1 tb-text">填报转会流程</text>
				<image src="../../static/images/xieziban.png" mode="" class="tianbao-img"></image>
			</view>
			<view class="steps background-f borderradius" style="border-top-right-radius: 0;border-top-left-radius: 0;">
				<view class="step" v-for="(step, index) in stepList" :key="index">
					<text class="circle"></text>
					<view class="step-title">{{ step }}</view>
					<view class="line" v-if="index != stepList.length - 1"></view>
				</view>
			</view>
		</view>
		<view class="margin-b">
			<view class="tianbao tianbao-backimg">
				<text class="flex1 tb-text">扫码转会流程</text>
				<image src="../../static/images/code.png" mode="" class="tianbao-img"></image>
			</view>
			<view class="steps background-f borderradius" style="border-top-right-radius: 0;border-top-left-radius: 0;">
				<view class="step" v-for="(step, index) in codestepList" :key="index">
					<text class="circle"></text>
					<view class="step-title">{{ step }}</view>
					<view class="line" v-if="index != codestepList.length - 1"></view>
				</view>
			</view>
		</view>
		<view style="height: 20rpx;">

		</view>

		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content-data">
				<QRCodeScanner v-if="sendCode" @decodeText="onScan" />
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		toast
	} from '../../utils/common';
	import QRCodeScanner from '@/components/QRCodeScanner.vue';

	export default {
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			uni.showModal({
				title: '提示',
				content: '是否退出当前页面？',
				success: (res) => { // 使用箭头函数保持 `this` 上下文
					if (res.confirm) {
						this.$router.back();
						this.$router.back();
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			return true;
		},
		components: {
			QRCodeScanner
		},
		onShow() {
			const systemInfo = uni.getSystemInfoSync();
			const platform = systemInfo.platform;
			if (platform === 'ios' || platform === 'android') {
				this.userTopAuth(true, '(MembersCredential|WorkerMembersCredential)&PhoneNumberCredential')
					.then(res => {
						this.formDataSet(res);
					})
					.catch(err => {
						this.formDataSet(err);
					});
			} else {
				this.userTopAuth(false, '(MembersCredential|WorkerMembersCredential)&PhoneNumberCredential')
					.then(res => {
						this.formDataSet(res);
					})
					.catch(err => {
						this.$router.back();
					});
			}
		},
		data() {
			return {
				sendCodeStatus: true,
				dataInfo: [],
				sendCode: false,
				membertransferData: null,
				stepList: [
					"选择填报转会",
					"填写申请转会资料",
					"选择要加入的工会组织",
					"提交申请等待审批"
				],
				codestepList: [
					"选择扫码转会",
					"扫描转会二维码",
					"填写申请转会资料",
					"提交申请等待审批"
				]
			};
		},
		methods: {
			// 设置表单数据
			formDataSet(form) {
				this.dataInfo.push(form);
				this.membertransferData = form;
			},
			// 申请组织员
			goapplyfororganizer() {
				this.$refs.popup.open();
				this.sendCode = true;
				this.sendCodeStatus = false;
			},
			// 填报转会
			gofillintransfer() {
				if (!this.membertransferData.MembersCredential) {
					toast('您还不是工会会员，请先加入工会');
					return;
				}
				const userObj = {
					applyUserDid: this.membertransferData.MembersCredential.userDid,
					applyUserName: this.membertransferData.MembersCredential.name,
					applyIdCard: this.membertransferData.MembersCredential.idNumber,
					registrationArea: this.membertransferData.MembersCredential.registrationArea,
					unitName: this.membertransferData.MembersCredential.unitName,
					unionName: this.membertransferData.MembersCredential.unionName,
					applyPhone: this.membertransferData.PhoneNumberCredential.mobileNumber,
					effectiveEndTime: this.membertransferData.PhoneNumberCredential.effectiveEndTime,
					effectiveStartTime: this.membertransferData.PhoneNumberCredential.effectiveStartTime,
				};
				this.$tab.navigateTo(`/pages/work/fillintransfer?userObj=${encodeURIComponent(JSON.stringify(userObj))}`);
			},
			// 扫码转会
			goscancodetransfer() {
				if (!this.membertransferData.MembersCredential) {
					toast('您还不是工会会员，请先加入工会');
					return;
				}
				this.$refs.popup.open();
				this.sendCode = true;
				this.sendCodeStatus = true;
			},
			// 处理扫码结果
			onScan(result) {
				this.sendCode = false;

				if (!result['applyUnionId']) {
					toast('请扫描正确的二维码')
					this.$refs.popup.close();
					return
				}

				this.$refs.popup.close();
				if (this.sendCodeStatus) {
					const userObj = {
						applyUserDid: this.membertransferData.MembersCredential.userDid,
						applyUserName: this.membertransferData.MembersCredential.name,
						applyIdCard: this.membertransferData.MembersCredential.idNumber,
						registrationArea: this.membertransferData.MembersCredential.registrationArea,
						unitName: this.membertransferData.MembersCredential.unitName,
						unionName: this.membertransferData.MembersCredential.unionName,
						applyPhone: this.membertransferData.PhoneNumberCredential.mobileNumber,
						effectiveEndTime: this.membertransferData.PhoneNumberCredential.effectiveEndTime,
						effectiveStartTime: this.membertransferData.PhoneNumberCredential.effectiveStartTime,
						approvalUnionName: result['applyUnionName'],
						approvalUnionId: result['applyUnionId'],
					};
					this.$tab.navigateTo(
						`/pages/work/scancodetransfer?userObj=${encodeURIComponent(JSON.stringify(userObj))}`);
				} else {
					const userInfiData = this.membertransferData.MembersCredential || this.membertransferData
						.WorkerMembersCredential;
					const userObj = {
						applyUserName: userInfiData.name,
						applyIdCard: userInfiData.idNumber,
						applyPhone: this.membertransferData.PhoneNumberCredential.mobileNumber,
						applyTradeUnionName: result['applyUnionName'],
						applyTradeUnionId: result['applyUnionId'],
						approvalPerson: result['userDid'],
						approvalPersonDid: result['userDid']
					};
					console.log(userObj);
					this.$tab.navigateTo(
						`/pages/work/applyfororganizer?userObj=${encodeURIComponent(JSON.stringify(userObj))}`);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.membertransfer {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(255, 192, 184, 1) 0%, rgba(255, 245, 237, 1) 99.54%);




		.margin-b {
			margin: 0 16px;
			margin-bottom: 20rpx;
		}

		.img {
			width: 100%;
			margin: 0 auto;
		}

		.btn-img {
			display: flex;
			margin: 0 16px;
			margin-bottom: 20rpx;

			.left {
				width: 340rpx;
				height: 360rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-right: 8px;
				background: #fff;
				box-shadow: 1.95px 1.95px 2.6px rgba(0, 0, 0, 0.15);
			}

			.image {
				width: 172rpx;
				height: 172rpx;
			}

			.right1 {
				margin-bottom: 16rpx;
				box-shadow: 1.95px 1.95px 2.6px rgba(0, 0, 0, 0.15);
			}

			.right2 {
				box-shadow: 1.95px 1.95px 2.6px rgba(0, 0, 0, 0.15);
			}
		}

		.marginL20 {
			margin-left: 30rpx;
		}

		.marginL8 {
			margin-left: 16rpx;
		}

		.tianbao {
			height: 88rpx;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
		}

		.tianbao-backimg {
			background-image: url("../../static/images/beijing.png");
			background-position: 0% 0%;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.tianbao-img {
			width: 42rpx;
			height: 42rpx;
		}

		.tb-text {
			font-size: 14px;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 20.27px;
			color: rgba(255, 255, 255, 1);
			text-align: justify;
			vertical-align: top;
		}

		.steps {
			display: flex;
			flex-direction: column;
			padding: 32rpx;

			.step {
				display: flex;
				align-items: center;
				position: relative;

				.circle {
					width: 20rpx;
					height: 20rpx;
					background: rgba(189, 26, 45, 1);
					transform: rotate(45deg);
				}

				.step-title {
					width: auto;
					height: 96rpx;
					line-height: 96rpx;
					margin-left: 16rpx;
					flex: 1;
				}

				.line {
					width: 1px;
					height: 64rpx;
					border: 1px dashed rgba(229, 229, 229, 1);
					position: absolute;
					left: 10rpx;
					top: 64rpx;
				}
			}

			.borderradius {
				box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16);
				border-radius: 20rpx;
			}
		}
	}

	.marginL20 {
		margin-left: 30rpx;
	}
</style>